<template>
  <div class="zuopin" @scroll="gun" ref="gunju">
      <div class="paixu"  v-show="isshowpai===true">
          <p @click="dianpai">{{title}}</p>
      </div>
      <div class="paixuer" :style="Paixu" >
         <p v-for="(item,index) in Title" :key="index"  @click="xuanpai(item.name,index)">{{item.name}}</p>
      </div>
      <div class="line"></div>

      <div class="xiangsi">
           <div class="sicentent" v-for="(item,index) in neirong" :key="index" @click="xiangsi(item.resource.id)">
               <img  :src="item.resource.cover" alt="">
               <div class="centent-left">
                   <p class="p5">{{item.resource.title}}</p>
                   <p class="p6">播放&nbsp;{{bofang[index]}}&nbsp;&nbsp;喜欢&nbsp;{{xihuan[index]}}</p>
                   <div class="authord">
                    <img class="imgauthor" :src="item.resource.author.userinfo.avatar" alt="">
                   <span>{{item.resource.author.userinfo.username}}</span>
                   </div>   
               </div>
           </div>
       </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
    created(){
      
      this.getzuopin(this.$route.query.id,this.page,this.order);
    },
   data(){
        return{
          Paixu:{
              display: 'none',
          },
          title:'默认排序',
          Title:[
              {
                 name:'默认排序'
              },
              { 
                 name:'热门排序'
              },
              {
                  name:'最新上传'
              }
          ],

          isshow:false,
          neirong:[],
          bofang:[],
          xihuan:[],
          page:1,
          order:'',
          isshowpai:true
       }
   },
   methods:{
       //排序
       xuanpai(name,index){
           if(this.isshow===true){
                this.Paixu.display="block";
                this.isshow=!this.isshow
           }else if(this.isshow===false){
               this.Paixu.display="none";
               this.isshow=!this.isshow
               
               this.title=name
               if(this.title==="默认排序"){
                   this.getzuopin(this.$route.query.id,this.page,this.order)
               }
               if(this.title==="热门排序"){
                  this.order="view"
                  this.getzuopin(this.$route.query.id,this.page,this.order)
               }
               if(this.title==="最新上传"){
                  this.order="new"
                  this.getzuopin(this.$route.query.id,this.page,this.order)
               }
           }
       },
       xiangsi(id){
         
          this.$router.push({name:'message',query:{id:id}})
       },
       //视频点赞数
       formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + "";
      } else if (num >= 1 && num <= 10000) {
        return num + "";
      } else {
        return (num / 10000).toFixed(1) + "w";
      }
       },
    //触底的事件
      gun(){
        if(this.$refs.gunju.scrollHeight-Math.ceil(this.$refs.gunju.scrollTop)===this.$refs.gunju.clientHeight){
             this.page++
             this.getzuopin(this.$route.query.id,this.page)
        }
      },
       dianpai(){
           if(this.isshow===true){
                this.Paixu.display="block";
                this.isshow=!this.isshow
           }else if(this.isshow===false){
               this.Paixu.display="none";
               this.isshow=!this.isshow
           }
           
       },
       getzuopin(id,page,order){
           this.axios({
               method:'get',
               url:'https://apis.netstart.cn/xpc/user/'+id+'/articles?',
               params:{
                   type:'public',
                   order:order,
                   is_hide_in_space:0,
                   return_struct_type:"user_home",
                   page:page
               }
           }).then(result=>{
               this.neirong=result.data.data.list
              
               if(this.neirong.length===0){
                   Toast('改用户暂无作品')
                   this.isshowpai=false
               }
               this.neirong.forEach(v => {
                   let bofang=this.formatNumber(v.resource.count.count_view);
                   let xihuan=this.formatNumber(v.resource.count.count_like)
                   this.bofang.push(bofang)
                   this.xihuan.push(xihuan)
               });
           }).catch(err=>{
              
           })
       }
   }
}
</script>

<style lang="less" scoped>
.zuopin{
    width: 100%;
}
.line{
    width: 100%;
    height: 20px;
    
}
.paixu{
    width: 50px;
    height: 30px;
    text-align: center;
   margin-left: 38px;
   font-size: 13px;
    color: rgb(171, 169, 169);
    p{
        width: 60px;
    }
}
.paixuer{
    width: 70px;
    height: 115px;
    position: absolute;
    text-align: center;
    margin-left: 38px;
    margin-top: 5px;
    border: 1px solid #ddd;
    background-color: white;
    p{
        width: 70px;
        height: 26px;
        color: rgb(171, 169, 169);
        border-bottom: 1px solid #ddd;
    }
}
.xiangsi{
    width: 100%;
    p{
    width: 100%;
    height: 20px;
    font-size: 20px;
    font-weight: bold;
    margin-left: 10px;
    }
    .sicentent{
        width: 100%;
        height: 110px;
        display: flex;
        margin-bottom: 20px;
        img{
            width: 180px;
            height: 110px;
            border-radius: 10px;
        }
        .centent-left{
            width: 50%;
            height: 100px;
            .p5{
               text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              font-size: 15px;
            }
            .p6{
                margin-top: -3px;
                font-size: 12px;
                font-weight: 500;
                color: rgb(172, 168, 168);
            }
            .authord{
                display: flex;
                align-items: center;
                margin-top: -5px;
            }
            .imgauthor{
                width: 25px;
                height: 25px;
                border-radius: 50%;
                border: 1px solid #ddd;
                margin-left: 10px;
                margin-top: 0px;
            }
            span{
                margin-top: 0px;
                margin-left: 10px;
            }
        }
    }
   
}
</style>